<template>
  <a-row :class="['p-4', `${prefixCls}--box`]" :gutter="10">
    <a-col :xl="6" :lg="8" :md="10" :sm="24" style="flex: 1">
      <a-card :bordered="false" style="height: 100%">
        <DepartTree @select="onTreeSelect" />
      </a-card>
    </a-col>
    <a-col :xl="18" :lg="16" :md="14" :sm="24" style="flex: 1">
      <a-card :bordered="false" style="height: 100%">
        <a-tabs defaultActiveKey="user-info">
          <a-tab-pane tab="基本信息" key="base-info" forceRender>
            <DepartBaseInfoTab :data="departData" />
          </a-tab-pane>
          <a-tab-pane tab="用户信息" key="user-info">
            <DepartUserInfoTab :data="departData"  :selecteddeparts="selecteddepartsA"
              :depname="depname" :treeData="treeData"  :Companydata="Companydata" />
          </a-tab-pane>
          <!-- <a-tab-pane tab="部门角色" key="role-info">:showEdit="isLeafds"
            <DepartRoleInfoTab :data="departData" />
          </a-tab-pane> -->
        </a-tabs>
      </a-card>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup name="system-depart-user">
import { provide, ref } from 'vue';
import { useDesign } from '/@/hooks/web/useDesign';

import DepartTree from './components/DepartTree.vue';
import DepartBaseInfoTab from './components/DepartBaseInfoTab.vue';
import DepartUserInfoTab from './components/DepartUserInfoTab.vue';
import DepartRoleInfoTab from './components/DepartRoleInfoTab.vue';
import { isLeafTree, Getdetail } from './depart.user.api'
const { prefixCls } = useDesign('depart-user');
provide('prefixCls', prefixCls);

// 当前选中的部门信息
let departData = ref({});
let isLeafd = ref<any>();
let depname = ref<any>();
let isLeafds = ref<any>();
let selecteddepartsA = ref<any>();
let treeData = ref<any>({});
let Companydata = ref<any>();
// 左侧树选择后触发
async function onTreeSelect(data) {
  const params = { depId: data.id }
  Companydata.value = await Getdetail(params);
  console.log('Companydata.value',Companydata.value)
  treeData.value = data
  console.log('左侧选择之后给右侧数据', data)
  depname = data.departName
  departData.value = data;

  //塞入公司id
  selecteddepartsA.value = params
  //是否叶子节点
  isLeafd.value = await isLeafTree(params)
  isLeafds.value = isLeafd.value.isLeaf



}
</script>

<style lang="less">
@import './index.less';
</style>
